import { Row, Col, Select, PageHeader, Input, Divider, Form, TimePicker, Button, Modal, message } from "antd";
import React, { useEffect, useState } from 'react';
import axios from "axios";
import { useLocation } from "react-router-dom";
import moment from 'moment';

const { Option } = Select;
const format = 'HH:mm';

const BUSINESS_TYPE = new Map([
    ["DINNER", "正餐"],
    ["FAST_FOOD", "快餐"],
    ["HOT_POT", "火锅"],
    ["BARBECUE", "烧烤"],
    ["WESTERN_FOOD", "西餐"],
]);
const MANAGEMENT_TYPE = new Map([
    ["DIRECT_SALES", "直营"],
    ["ALLIANCE", "加盟"],
]);

export default function EditShop() {

    const [isModalVisible, setIsModalVisible] = useState(false);
    const [form] = Form.useForm();
    const [currentVersion, setCurrentVersion] = useState();
    let location = useLocation();
    const [dataSource, setDataSource] = useState(location.state.data);
    const businessNo = location.state.data.businessNo;
    const tenantId = location.state.data.tenantId;
    const createdBy = location.state.data.auditing.createdBy;

    useEffect(() => {
        queryShop();
    }, []);

    function queryShop() {
        const instance = axios.create({
            headers: { "tenantId": tenantId, "userId": createdBy }
        })
        instance.get('/shop/' + businessNo)
            .then((res) => {
                if (res.data.status.code === 0) {
                    setCurrentVersion(res.data.data.version)
                }
            })
    }


    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        window.history.back(-1);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const onFinish = (values) => {
        const instance = axios.create({
            headers: { "tenantId": 500, "userId": 11000 }
        })
        instance.put('/shop/' + businessNo, {
            "businessArea": values.shopArea,
            "businessType": values.businessType,
            "comment": values.shopComment,
            "contact": {
                "address": values.address,
                "cellphone": values.cellphone,
                "name": values.contactName,
                "telephone": values.telephone
            },
            "managementType": values.managementType,
            "name": values.shopName,
            "openingHours": {
                "closeTime": moment(values.openTime).format("HH:mm"),
                "openTime": moment(values.closeTime).format("HH:mm"),
            },
            "version": currentVersion
        }
        ).then((res) => {
            if (res.data.status.code === 0) {
                console.log(res.data.status.code);
                queryShop();
                return;
            }
            error();
        });
    };

    const error = () => {
        message.error('门店信息已被更改，更新失败！');
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    form.setFieldsValue({
        shopName: dataSource.name,
        businessType: dataSource.businessType,
        managementType: dataSource.managementType,
        telephone: dataSource.contact.telephone,
        cellphone: dataSource.contact.cellphone,
        contactName: dataSource.contact.name,
        address: dataSource.contact.address,
        openTime: moment(dataSource.openingHours.openTime, format),
        closeTime: moment(dataSource.openingHours.closeTime, format),
        shopArea: dataSource.businessArea,
        shopComment: dataSource.comment
    });

    return (
        <>
            <Row className="title-row">
                <Col>
                    <PageHeader
                        className="site-page-header"
                        onBack={() => window.history.back(-1)}
                        title={dataSource.name}
                    />
                </Col>
            </Row>
            <Form
                form={form}
                name="editForm"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Row>
                    <Col span={24}>
                        <Divider orientation="left"><span style={{ "fontWeight": "bold", "fontSize": "18px" }}>通用信息</span></Divider>
                    </Col>
                </Row>
                <Row>
                    <Col style={{ "width": "32px" }}>
                        <Divider><span className="span-shop-name">门店名</span></Divider>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="shopName"
                            rules={[
                                {
                                    type: 'string',
                                    required: true,
                                    whitespace: true,
                                    message: '输入不能为空',
                                },
                                {
                                    max: 20,
                                    message: '门店名的最大长度为20字符',
                                },
                            ]}
                        >
                            <Input style={{
                                "width": "800px",
                                "borderTopRightRadius": "8px",
                                "borderBottomRightRadius": "8px",
                                "borderLeft": "none",
                                "marginLeft": "62px",
                            }}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Divider><span className="span-color">主营业态</span></Divider>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="businessType"
                        >
                            <Select disabled style={{
                                "width": "240px",
                                "marginRight": "30px",
                            }}>
                                <Option value="diner">正餐</Option>
                                <Option value="fastFood">快餐</Option>
                                <Option value="hotPot">火锅</Option>
                                <Option value="barbecue">烧烤</Option>
                                <Option value="westernFood">西餐</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col>
                        <Divider><span className="span-shop-name">管理类型</span></Divider>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="managementType"
                        >
                            <Select
                                disabled
                                style={{
                                    "width": "240px",
                                    "marginRight": "30px"
                                }}
                            >
                                <Option value="directSales">直营</Option>
                                <Option value="alliance">加盟</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <Divider orientation="left"><span style={{ "fontWeight": "bold", "fontSize": "18px" }}>联系方式</span></Divider>
                    </Col>
                </Row>
                <Row>
                    <Col style={{ "width": "32px" }}>
                        <Divider><span className="span-color">座机号</span></Divider>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="telephone"
                            rules={[
                                {
                                    type: 'string',
                                    required: true,
                                    pattern: /[0-9-()（）]{7,18}/,
                                    message: '输入正确的格式',
                                },
                                {
                                    max: 18,
                                    message: '座机号长度最多18位'
                                }
                            ]}
                        >
                            <Input style={{
                                "width": "180px",
                                "borderTopRightRadius": "8px",
                                "borderBottomRightRadius": "8px",
                                "borderLeft": "none",
                                "marginLeft": "62px",
                            }}
                            />
                        </Form.Item>
                    </Col>
                    <Col style={{ "width": "32px" }}>
                        <Divider><span className="span-color">手机号</span></Divider>
                    </Col>
                    <Col span={6}>
                        <Form.Item
                            name="cellphone"
                            rules={[
                                {
                                    type: 'string',
                                    required: true,
                                    pattern: /0?(13|14|15|17|18)[0-9]{9}/,
                                    message: '请输入正确的手机号',
                                },
                                {
                                    max: 11,
                                    message: '手机号最大长度11位',
                                },
                            ]}
                        >
                            <Input
                                type={Number}
                                style={{
                                    "width": "180px",
                                    "borderTopRightRadius": "8px",
                                    "borderBottomRightRadius": "8px",
                                    "borderLeft": "none",
                                    "marginLeft": "62px",
                                }}
                            />
                        </Form.Item>
                    </Col>
                    <Col style={{ "width": "32px" }}>
                        <Divider><span className="span-color">联系人</span></Divider>
                    </Col>
                    <Col span={8}>
                        <Form.Item

                            name="contactName"
                            rules={[
                                {
                                    type: 'string',
                                    required: true,
                                    pattern: /[\u4e00-\u9fa5]{2,5}/,
                                    message: '输入正确的格式',
                                },
                                {
                                    max: 5,
                                    message: '姓名最大长度5位',
                                },
                            ]}
                        >
                            <Input style={{
                                "width": "180px",
                                "borderTopRightRadius": "8px",
                                "borderBottomRightRadius": "8px",
                                "borderLeft": "none",
                                "marginLeft": "40px",
                            }}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col style={{ "width": "32px" }}>
                        <Divider><span className="span-shop-address">地址</span></Divider>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="address"
                            rules={[
                                {
                                    type: 'string',
                                    required: true,
                                    pattern: /[\u4e00-\u9fa5]{1,50}/,
                                    message: '输入正确的格式',
                                },
                                {
                                    max: 50,
                                    message: '地址最大长度50位',
                                },
                            ]}
                        >
                            <Input style={{
                                "width": "800px",
                                "borderTopRightRadius": "8px",
                                "borderBottomRightRadius": "8px",
                                "borderLeft": "none",
                                "marginLeft": "62px",
                            }}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <Divider orientation="left"><span style={{ "fontWeight": "bold", "fontSize": "18px" }}>经营信息</span></Divider>
                    </Col>
                </Row>
                <Row>
                    <Col style={{ "width": "32px" }}>
                        <Divider><span className="span-shop-address">营业时间</span></Divider>
                    </Col>
                    <Col span={10}>
                        <Form.Item
                            name="openTime"
                        >
                            <TimePicker className="openTime" />
                        </Form.Item>
                    </Col>
                    <Col>
                        <Form.Item
                            name="closeTime"
                        >
                            <TimePicker className="closeTime" />
                        </Form.Item>
                    </Col>
                    <Col style={{ "width": "32px" }}>
                        <Divider><span className="span-shop-address">门店面积</span></Divider>
                    </Col>
                    <Col span={10}>
                        <Form.Item
                            name="shopArea"
                            rules={[{
                                required: true
                            }]}
                        >
                            <Input style={{
                                "width": "233px",
                                "borderTopRightRadius": "8px",
                                "borderBottomRightRadius": "8px",
                                "borderLeft": "none",
                                "marginLeft": "25px",
                            }}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col style={{ "width": "32px" }}>
                        <Divider><span className="span-shop-name">门店介绍</span></Divider>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            name="shopComment"
                            rules={[{
                                required: true
                            }]}
                        >
                            <Input style={{
                                "width": "800px",
                                "borderTopRightRadius": "8px",
                                "borderBottomRightRadius": "8px",
                                "borderLeft": "none",
                                "marginLeft": "65px",
                            }}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Divider />
                <Button onClick={() => {
                    showModal()
                }}>取消</Button>
                <Modal
                    title="确认丢失修改的内容"
                    visible={isModalVisible}
                    onOk={handleOk}
                    onCancel={handleCancel}
                    okText="返回主界面"
                    cancelText="回到当前页面"
                    okType=""
                >
                    <p style={{ "textAlign": "center" }}>所有修改均会丢失，请确认？</p>
                </Modal>
                <Button
                    htmlType="submit"
                    onClick={() => {
                        window.history.back(-1);
                        // onFinish();
                    }}
                    style={{
                        "backgroundColor": "rgb(244,188,72)"
                    }}
                >
                    保存并返回</Button>

                <Button
                    htmlType="submit"
                    style={{
                        "backgroundColor": "rgb(244,188,72)"
                    }}
                >
                    保存</Button>

            </Form>
        </>
    )
}